/***************************************************************************
*   Copyright (C) 2011 by Chuck Gao & Alex Liu                             *
*                                                                          *
*   This program is free software: you can redistribute it and/or modify   *
*   it under the terms of the GNU General Public License as published by   *
*   the Free Software Foundation, either version 3 of the License, or      *
*   (at your option) any later version.                                    *
*                                                                          *
*   This program is distributed in the hope that it will be useful,        *
*   but WITHOUT ANY WARRANTY; without even the implied warranty of         *
*   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          *
*   GNU General Public License for more details.                           *
*                                                                          *
*   You should have received a copy of the GNU General Public License      *
*   along with this program.  If not, see <http://www.gnu.org/licenses/>.  *
*                                                                          *
*   Contact author: chuckgao.cg@gmail.com                                  *
*                   alex2202375@gmail.com                                  *
***************************************************************************/

import QtQuick 1.0

Item {
    id: detailedView
    width: 360
    height: 640

    property QtObject recipe: null

    // Title Bar. How to design?
    Item {
        id: titleBar
        width: parent.width
        height: 80
        anchors.top: parent.top
        anchors.left: parent.left

        Text {
            anchors.centerIn: parent
            text: recipe.name
            font.family: "Freestyle Script"
            font.pointSize: 32
            color: "white"
        }

        Rectangle {
            id: indicator
            width: 56
            height: 24
            anchors.right: parent.right
            anchors.rightMargin: 16
            anchors.verticalCenter: parent.verticalCenter
            color: "white"
            opacity: 0.6
            radius: 5
            visible: "detail" == detailedView.state
            smooth: true

            /*******************************************
             * Test code -- Enter
             *****************************************/
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    detailedView.state = "simple"
                }
            }
            /*******************************************
             * Test code -- Exit
             *****************************************/
        }

        Text {
            id: indicatorText
            anchors.centerIn: indicator
            text: "食谱"
            font.family: "Freestyle Script"
            font.pointSize: 18
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            visible: indicator.visible
            color: "lightblue"
            smooth: true
        }
    }

    // Cuisine demonstration area. 2 Parts

    state: 'simple'

    states: [
        State {
            name: "simple"
            PropertyChanges {
                target: cuisineDemons
                x:0
                opacity: 1
            }
            PropertyChanges {
                target: cuisineDemons2
                opacity: 0
            }
        },
        State {
            name: "detail"
            PropertyChanges {
                target: cuisineDemons
                x: -cuisineDemons.width
                opacity: 0
            }
            PropertyChanges {
                target: cuisineDemons2
                opacity: 1
            }
        }
    ]

    transitions: [
        Transition {
            from: "simple"
            to: "detail"
            reversible: true
            ParallelAnimation {
                PropertyAnimation {
                    target: cuisineDemons
                    properties: "x,opacity"
                    duration: 600
                }
                PropertyAnimation {
                    target: cuisineDemons2
                    properties: "opacity"
                    duration: 600
                }
            }
        }
    ]

    // Floating background ?
    Image {
        width: 180
        height: 180
        x: 20
        y: 40
        fillMode: Image.PreserveAspectFit
        smooth: true
        opacity: 0.4
        source: "qrc:/Images/floatingItem1.png"
    }

    // Part 1.
    Item {
        id: cuisineDemons
        width: parent.width
        height: 560
        anchors.top: titleBar.bottom
        // Cuisine picture. Can view the video?
        Item {
            id: cuisineFrame
            width: parent.width
            height:280
            anchors.left: parent.left
            anchors.top: parent.top

            Image {
                id: cuisineImage
                width: 320
                height: 240
                anchors.centerIn: parent
                source: "qrc:/Images/kungpao.jpg"
            }

            Image {
                id: videoBtn
                width: 60
                height: 60
                anchors.centerIn: parent
                smooth: true
                fillMode: Image.PreserveAspectFit
                source: "qrc:/Images/overlay-video.png"

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        // Try to show cooking video on the internet
                    }
                }
            }

            // Overlay
            Rectangle {
                anchors.fill: parent
                gradient: Gradient {
                    GradientStop { position: 0; color: Qt.rgba(255,255,255,0.1) }
                    GradientStop { position: 0.5; color: Qt.rgba(255,255,255,0.2) }
                    GradientStop { position: 1.0; color: Qt.rgba(255,255,255,0.1) }
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    detailedView.state = "detail"
                }
            }
        }

        // Cuisine description
        Flickable {
            id: cuisineDescription
            width: parent.width
            height:280
            anchors.left: parent.left
            anchors.top: cuisineFrame.bottom
            anchors.margins: 4
            contentWidth: parent.width
            contentHeight: edit.paintedHeight
            interactive: true
            clip: true

            function ensureVisible(r)
            {
                if (contentX >= r.x)
                    contentX = r.x;
                else if (contentX+width <= r.x+r.width)
                    contentX = r.x+r.width-width;
                if (contentY >= r.y)
                    contentY = r.y;
                else if (contentY+height <= r.y+r.height)
                    contentY = r.y+r.height-height;
            }

            TextEdit {
                id: edit
                width: cuisineDescription.width
                height: cuisineDescription.height
                font.family: "Freestyle Script"
                font.pointSize: 32
                color: "white"
                wrapMode: TextEdit.Wrap
                cursorVisible: false
                readOnly: true
                text: "鲜香细嫩，微麻辣中而姜葱蒜味浓，主要突出以糊辣，荔枝味型，略带甜酸味道"
                onCursorRectangleChanged: cuisineDescription.ensureVisible(cursorRectangle)
            }
        }
    }

    // Part 2.
    Item {
        id: cuisineDemons2
        width: parent.width
        height: 560
        anchors.left: cuisineDemons.right
        anchors.top: cuisineDemons.top

        RecipeDetailedTabView {
            anchors.fill: parent
        }
    }
}
